import { Col, Row } from 'antd';
import { useEffect, useState } from 'react';
import styles from "./goodsDetail.module.less";
import { GoodsData } from '#/type';

function GoodsDetail({ goodsData }: { goodsData?: GoodsData }) {
  const [labels, setLabels] = useState<any>([]);
  const { name = '--', sku = '--', spu = '--', size, styleNumber, technology, weight, sex, fillType, materialName, material, fabricWeight, thumbs = [] } = goodsData || {};

  useEffect(() => {
    setLabels([
      { key: '中文名称', value: name },
      { key: 'SKU编码', value: sku },
      { key: 'SPU编码', value: spu },
      { key: '生产工艺', value: technology },
      { key: '重量', value: `${weight}kg` },
      { key: '性别', value: sex },
      { key: '印刷方式', value: `${fillType === 0 ? "满版印刷" : ""}${fillType === 1 ? "局部印" : ""} ` },
      { key: '面料', value: materialName },
      { key: '面料材质', value: material },
      { key: '面料克重', value: fabricWeight },
      { key: '款号', value: styleNumber },
    ])
  }, [goodsData])

  return (
    <div className={styles.goodsDetailModal}>
      <Row>
        {
          labels.map(({ key, value }: any, i: number) => (
            <Col span={8} className={styles.flex} key={i}>
              <div className={styles.btn}>
                {key}
              </div>
              <div className={styles.value}>
                {value}
              </div>
            </Col>
          ))
        }
      </Row>
      <br />
      <div className={styles.intro}>
        <h2>温馨提示</h2>
        <div>
          该图片展示效果仅供参考，最终效果以实物为准！由于生产批次、机器设备等客观因素原因，难以避免或将存在微小色差、位置及大小等误差，如遇以上问题均属于正常现象，将不予纳入售后处理范畴。
        </div>
      </div>

    </div>
  )
}


export default GoodsDetail
